<template>
	<view :style="{'height': h}" class="__lib-scroll-container">
		<view class="__lib-scroll-container-header">
			<slot name="header"></slot>
		</view>
		<scroll-view :scroll-y="true" class="__lib-scroll-container-content">
			<slot name="content"></slot>
		</scroll-view>
		<view class="__lib-scroll-container-footer">
			<slot name="footer"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'lib-scroll-container',
		emit: ['ready'],
		props: {
			height: {
				type: String,
				default: 'auto',
				required: false,
			},
		},
		data() {
			return {
				h: 'auto',
			}
		},
		methods: {
			setHeight(){
				if(this.height === 'auto'){
					this.h = uni.getSystemInfoSync().windowHeight + 'px';
					console.log(`height:${this.h}`);
				}
			},
		},
		async mounted() {
			this.setHeight();
		},
		watch: {
			'height': {
				handler(newVal, oldVal) {
					if(newVal !== 'auto'){
						this.h = newVal;
					}
				},
				deep: true,
				immediate: true,
			},
		},
	}
</script>




<style lang="scss">
	@import "./lib-scroll-container.scss";
</style>